<template>
  <div class="home">
    <!-- 英雄区域 -->
    <section class="hero">
      <div class="hero-content">
        <h1 data-aos="fade-up">全球跨境电商解决方案</h1>
        <p data-aos="fade-up" data-aos-delay="100">为您提供专业的跨境电商服务，助力企业走向世界</p>
        <router-link to="/contact" class="btn" data-aos="fade-up" data-aos-delay="200">联系我们</router-link>
      </div>
    </section>

    <!-- 关于我们 -->
    <section class="about-section">
      <div class="container">
        <h2 class="section-title" data-aos="fade-up">关于我们</h2>
        <div class="about-content">
          <div class="about-text" data-aos="fade-right">
            <h3>我们的使命</h3>
            <p>致力于为全球客户提供优质的跨境电商服务，帮助企业拓展国际市场，实现全球化发展。</p>
            <h3>我们的优势</h3>
            <ul>
              <li>专业的跨境电商团队</li>
              <li>全球物流网络</li>
              <li>本地化运营支持</li>
              <li>一站式解决方案</li>
            </ul>
          </div>
          <div class="about-image" data-aos="fade-left">
            <img src="@/assets/company-intro.jpg" alt="关于我们">
          </div>
        </div>
      </div>
    </section>

    <!-- 服务内容 -->
    <section class="services-section">
      <div class="container">
        <h2 class="section-title" data-aos="fade-up">我们的服务</h2>
        <div class="services-grid">
          <div class="service-card" data-aos="fade-up" data-aos-delay="100">
            <el-icon><ShoppingCart /></el-icon>
            <h3>电商平台运营</h3>
            <p>专业的电商平台运营团队，为您提供全方位的店铺管理服务。</p>
          </div>
          <div class="service-card" data-aos="fade-up" data-aos-delay="200">
            <el-icon><Van /></el-icon>
            <h3>国际物流</h3>
            <p>全球物流网络，提供快速、可靠的国际运输服务。</p>
          </div>
          <div class="service-card" data-aos="fade-up" data-aos-delay="300">
            <el-icon><ShoppingBag /></el-icon>
            <h3>产品采购</h3>
            <p>专业的采购团队，为您寻找优质的产品供应商。</p>
          </div>
          <div class="service-card" data-aos="fade-up" data-aos-delay="400">
            <el-icon><User /></el-icon>
            <h3>本地化服务</h3>
            <p>提供多语言客服支持，帮助您更好地服务全球客户。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 数据统计 -->
    <section class="stats-section">
      <div class="container">
        <div class="stats-grid">
          <div class="stat-item" data-aos="fade-up">
            <h3>100+</h3>
            <p>合作品牌</p>
          </div>
          <div class="stat-item" data-aos="fade-up" data-aos-delay="100">
            <h3>50+</h3>
            <p>覆盖国家</p>
          </div>
          <div class="stat-item" data-aos="fade-up" data-aos-delay="200">
            <h3>1000万+</h3>
            <p>年销售额</p>
          </div>
          <div class="stat-item" data-aos="fade-up" data-aos-delay="300">
            <h3>99%</h3>
            <p>客户满意度</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ShoppingCart, Van, ShoppingBag, User } from '@element-plus/icons-vue'
</script>

<style scoped>
.hero {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('@/assets/about-header.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.hero-content {
  max-width: 800px;
  padding: 0 20px;
}

.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.5rem;
  margin-bottom: 30px;
}

.about-section {
  background: #f8f9fa;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.about-text h3 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.about-text ul {
  list-style: none;
  padding: 0;
}

.about-text ul li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 25px;
}

.about-text ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #3498db;
}

.about-image img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.services-section {
  background: #fff;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.service-card {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
}

.service-card i {
  font-size: 2.5rem;
  color: #3498db;
  margin-bottom: 20px;
}

.service-card h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.stats-section {
  background: linear-gradient(135deg, #3498db, #2c3e50);
  color: #fff;
  padding: 80px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  text-align: center;
}

.stat-item h3 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  .hero p {
    font-size: 1.2rem;
  }

  .about-content {
    grid-template-columns: 1fr;
  }

  .about-image {
    order: -1;
  }
}
</style> 